<template>
	<div v-if="showSearch" class="grid-search-form" id="gridSearch">
		<div id="grid-search-form-list" :class="'grid-search-form-list '+collapsedHeight">
			<ul class="grid-search-form-ul">
				<li v-if="item.itemRender.name!='$hidden'&&item.itemRender.name!='$buttons'" v-for="item in theTableform.items"><span class="grid-search-form-label">{{item.title}}：</span>
					<f2bpmui-textbox :field="item" :fieldvalue="theTableform.data[item.field]" v-if="item.itemRender.name=='$input'"
					 :style="isSimpleSearch?'width: 150px; ':'' " @updatevalue="updateFieldValue"></f2bpmui-textbox>
					<f2bpmui-select :field="item" :fieldvalue="theTableform.data[item.field]" v-else-if="item.itemRender.name=='$select'"
					 @updatevalue="updateFieldValue"></f2bpmui-select>
					<f2bpmui-datetime :field="item" :fieldvalue="theTableform.data[item.field]" v-else-if="item.itemRender.name=='$datetime'"
					 @updatevalue="updateFieldValue"></f2bpmui-datetime>
					<f2bpmui-autocompleter :field="item" :fieldvalue="theTableform.data[item.field]" v-else-if="item.itemRender.name=='autocompleter'"
					 @updatevalue="updateFieldValue"></f2bpmui-autocompleter>
				</li>
			</ul>
		</div>
		<div class="grid-search-form-searchbtn-toolbar">
			<el-input size="small" :placeholder="theTableform.props.searchPlaceholder" v-model="theTableform.data.searchtext"
			 clearable :style="isSimpleSearch?'width: 148px;margin-right: 5px':'width: 247px;margin-right: 5px' " :searchfields="theTableform.data.searchfields" />
			<el-divider direction="vertical"></el-divider>
			<el-button size="small" :type="submitbtn.status" class="search-btn" @click="btnclick('dataGridSearch')"><i :class="submitbtn.icon"></i>{{submitbtn.content}}</el-button>
			<span v-if="expansMore" class="expans-more" @click="onSearchExpansMore">{{moreTitle}} <i :class="moreIcon"></i></span>
			<span class="ml10" v-html="extenddes"></span>
		</div>
	</div>
</template>

<script>
	export default {
		name: "f2bpm-gridsearchform",
		props: ["tableform", "extenddes"],
		watch: {
			value(val, oleVal) {
				var that = this;
				//基本结构
				// var selectItem = {
				//     field: '',
				//     title: '',
				//     span: 4,
				//     itemRender: {props: {clearable: true}, attrs: {}, name: '$select', options: []}
				// };
				//this.$emit('updatevalue', that.field, val)
			}
		},
		mounted() {
			var that = this;
		},
		created: function() {
			var that = this;
			that.theTableform = that.tableform;
			if (that.theTableform.items.length > 0) {
				//过滤出两个按钮
				var item = that.theTableform.items.find(a => a.itemRender.name == "$buttons");
				var fields = that.theTableform.items.filter(a => a.itemRender.name != "$buttons");
				that.expansMore = fields.length >= 2;
				that.isSimpleSearch = item.isSimpleSearch;
				var buttons = item.itemRender.children;
				var submit = buttons.find(a => a.props.type == 'submit');
				that.submitbtn = submit.props;
				var resetbtn = buttons.find(a => a.props.type == 'reset');
				if (resetbtn) {
					that.resetbtn = resetbtn.props;
				} else {
					that.isShowResetBtn = false;
				}
				that.init();

			} else {
				that.showSearch = false;
			}
		},
		data: function() {
			return {
				searchfieldsTitle: "",
				showSearch: true,
				submitbtn: {
					icon: 'fa fa-search',
					type: 'submit',
					content: "查询",
					status: 'default'
				},
				resetbtn: {
					icon: 'fa  fa-undo',
					type: 'reset',
					content: '重置'
				},
				isShowResetBtn: true,
				isSimpleSearch: false,

				theTableform: {},
				expansMore: false,
				moreIcon: 'fa fa-angle-double-down',
				moreTitle: '展开',
				collapsedHeight: 'grid-search-form-list-height',
			}
		},

		methods: {
			init() {
				var that = this;

			},
			updateFieldValue(fieldName, newVal) {
				var that = this;
				that.theTableform.data[fieldName] = newVal;
				this.$emit('updatevalue', fieldName, newVal, "tableForm", "data")
			},
			btnclick(name) {
				var that = this;
				if (name == 'dataGridReSet') {
					$.each(that.theTableform.data, function(key, value) {
						that.updateFieldValue(key, "");
					})
				}
				this.$emit('searchformbtnclick', name);
			},
			dataGridSearch() {

			},
			onSearchExpansMore() {
				if (this.moreTitle == '展开') {
					this.moreIcon = 'fa fa-angle-double-up';
					this.collapsedHeight = '';
					this.moreTitle = '收起';
				} else {
					this.moreIcon = 'fa fa-angle-double-down';
					this.collapsedHeight = 'grid-search-form-list-height';
					this.moreTitle = '展开';
				}
			}

		}
	};
</script>
